<script lang="ts" setup>
const props = defineProps({ url: { type: String, default: '' } })
const show = ref(false)

const { bxAuthTicket, userInfo } = useUserStore()
const url = computed(() => {
  let url = ''
  if (!props.url?.includes('bx_auth_ticket')) {
    if (props.url?.includes('?')) {
      url = `${props.url}&bx_auth_ticket=${bxAuthTicket}&inFrame=true`
    }
    else {
      url = `${props.url}?bx_auth_ticket=${bxAuthTicket}&inFrame=true`
    }
  }
  if (userInfo) {
    url += `&login_user_info=${JSON.stringify(userInfo)}`
  }
  return url
})
const minHeight = ref(0)
onMounted(() => {
  show.value = true
  // 监听 message 事件
  window.addEventListener('message', (event) => {
    // 检查消息来源是否可信
    if (!event.origin?.includes('/xmp/') || !event.origin?.includes('/health/')) { // 替换为实际的源
      return
    }
    console.error('get message::', event)

    // 处理接收到的消息
    if (event.data.type && event.data.type === 'height') {
      console.log(`Iframe internal page height is: ${event.data.value}px`)
      // 可以在这里对 iframe 的高度进行设置
      minHeight.value = event.data.value
      // iframe.style.height = `${event.data.value}px`
    }
  })

  // // 确保 iframe 已经加载完毕
  // iframe.onload = function () {
  //   // 这里可以发送一个消息给 iframe，让它知道父页面已经准备好接收消息了
  //   iframe.contentWindow.postMessage({ type: 'ready' }, window.location.origin) // 替换为实际的源
  // }
})
</script>

<template>
  <div v-if="show" class="h-100% w-100%" :style="{ minHeight: `${minHeight}px` }">
    <iframe id="myIframe" :key="url" :src="url" frameborder="0" height="100%" width="100%" class="overflow-hidden" />
  </div>
</template>

<style>

</style>
